<template>
  <div id="forget-password">
    <div class="login_con">
      <div class="login_box">
        <div class="Vendor">
          <span>找回密码</span>
          <span class="Vendor-u">Retrieve Password</span>
        </div>
        <!-- 用户名 -->
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          class="demo-ruleForm"
        >
          <!-- 手机号 -->
          <el-form-item prop="phone">
            <el-input
              prefix-icon="el-icon-mobile-phone"
              type="text"
              placeholder="请输入手机号"
              v-model="ruleForm2.phone"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入新密码"
              v-model="ruleForm2.password"
              auto-complete="off"
            ></el-input>
          </el-form-item>

          <!-- 验证码 -->
          <el-form-item prop="phoneCode">
            <el-input
              v-model="ruleForm2.phoneCode"
              placeholder="请输入验证码"
              prefix-icon="el-icon-s-claim"
              class="input-min"
							style="width: 160px;"
            ></el-input>
				<el-button class="verification" :disabled="show != true ? true : false" v-on:click="sendSmsCode">发送验证码</el-button>
				<span class="register-msg-btn" v-show="!show">&nbsp;&nbsp;{{count}} 秒</span>
          </el-form-item>

          <button class="login-but" @click="loginForm()">确 定</button>

          <div>
            <span class="login-w">
              已有商户账号？
              <router-link class="abc" to="./login">直接登录</router-link>
            </span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { apiForgetPassword } from '../../request/api';
export default {
  name: "forgetPassword",
  data() {
    return {
      // 登录表单的数据绑定对象
      ruleForm2: {
        phone: "",
        password: "",
        phoneCode: ""
      },
      // 这是表单额验证规则对象
      rules2: {
        // 验证手机号是否合法
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "手机长度在 6-15 个字符",
            trigger: "blur"
          }
        ],
        // 验证密码
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度在 6 -15 个字符",
            trigger: "blur"
          }
        ],
        phoneCode: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ]
      },
			show:true,
			timer:null,
			count:''
    };
  },
  methods: {
    loginForm() {
      this.$refs.ruleForm2.validate(async valid => {
        if (!valid) return;
        apiSMSCode(this.ruleForm2).then(res =>{
                this.$router.push("/login"); 
                return this.$message.success(res.msg);
            }).catch(res => {
				return this.$message.error(res.msg);
		}) 
        var { data: res } = await this.$http.post(
          "baseapi/merchantBase/forgetPassword",
          this.ruleForm2
        );
      });
    },
		//短信验证码
	sendSmsCode(){
		this.show = false;
		const TIME_COUNT = 60;      
		if (!this.timer) {        
			this.count = TIME_COUNT;        
			this.show = false;      
			if(this.show = true){
				if(this.ruleForm2.phone != ''){
                    apiSMSCode({
                        phone:this.ruleForm2.phone,
					    codeType:'forgetPassword'
                    }).then(res =>{
                        this.show = true;
						clearInterval(this.timer);          
						this.timer = null;
						return this.$message.success(res.msg);
                    }).catch(res => {
						this.$message.error(res.msg);
					 }) 
				}else {
					this.$message.error('手机号码不能为空');
				}
			} 
		    this.timer = setInterval(() => {        
				if (this.count > 0 && this.count <= TIME_COUNT) {          
					this.count--;  
				} else {          
					this.show = true;          
					clearInterval(this.timer);          
					this.timer = null;         
				}        
			}, 1000)       
		}    
	},
  }
};
</script>
<style  lang="less" scoped>
#forget-password {
    .login-w {
        display: inline-block;
        width: 100%;
        text-align: right;
        color: #bfbfbf;
        a {
            color: #f68585;
        }
    }

    .login_con {
        background-color: #eff1f7;
        height: 100%;
        width: 100%;
        position: absolute;
    }

    .login_box {
        box-shadow: 0 0 10px #888;
        width: 336px;
        height: 414px;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        background-color: #fff;
        font-size: 14px;
        font-weight: normal;
        padding: 32px;
    }

    .Vendor {
        margin: 14px 0 20px;
        color: #4b95ff;
        font-size: 24px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 14px;
    }
    .Vendor-u {
        display: inline-block;
        margin-left: 10px;
        color: #bfbfbf;
        font-size: 14px;
    }
    .input-min {
        width: 60%;
    }
    .verification {
        display: inline-block;
        width: 110px;
        margin-left: 16px;
        height: 40px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        background: rgb(255, 135, 98);
        color: rgb(255, 255, 255);
        cursor: pointer;
        border-radius: 5px;
    }
    .password-w {
        float: right;
        color: rgb(153, 153, 153);
        text-decoration: none;
    }
    .password-w:hover {
        color: red;
    }
     .login-but {
        display: block;
        width: 100%;
        margin: 20px 0;
        background: #4b95ff;
        color: #fff;
        border: 0;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
    .register {
        display: block;
        color: #999;
        margin: 20px 0;
        text-align: center;
        font-size: 18px;
    }
}

</style>
